<template>
      <div class="panel">
        <slider class="slider" interval="4500">
          <div class="frame" v-for="item in imageList">
            <image resize="cover" :src="item.img" :style="{width:width+'px',height:height+'px'}"></image>
          </div>
          <indicator class="indicator"></indicator>
        </slider>
     </div>
</template>



<script>

export default {
   props: {
    imageList: {
      type: Array,
      required: false,
      default: []
    }
  },
  data () {
    return {
      width:750,
      height:750/2.962962962962963,
      weburl: 'http://hd.xinhehui.com/shuangshiyi'
    }
  },
  created:function(){}
}
</script>
<style>
  .slider {
  }
  .title {
    position: absolute;
    top: 20px;
    left: 20px;
    padding-left: 20px;
    width: 200px;
    color: #FFFFFF;
    font-size: 36px;
    line-height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .frame {
    width: 750px;
    position: relative;
  }
  .indicator {
    width: 750px;
    height: 100px;
    item-color: green;
    item-selected-color: red;
    item-size: 10px;
    position: absolute;
    top: 180px;
    left: 0px;
  }
</style>